<template>
    <div :style="setupmainbox">
        <div :style="titlebox">
            设&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置
        </div>
        <div :style="contentbox">
            <div :style="lable">用户名：</div>
            <div :style="lable">真实姓名：</div>
            <div :style="lable">手机号：</div>
            <div :style="lable">所属部门：</div>
            <div :style="lable">性别：</div>
            <div :style="lable">拥有权限：</div>
            <div :style="lable">当前密码：</div>
            <div :style="lable">新密码：</div>
            <div :style="lable">确认密码：</div>

            <div :style="[text,top25]" >{{userLoginName}}</div>
            <div :style="[text,top50]">{{userRealName}}</div>
            <div :style="[text,top75]">{{userPhoneNumber}}</div>
            <div :style="[text,top100]">{{userDept}}</div>
            <div :style="[text,top125]">{{userSex}}</div>
            <div :style="[text,top150]">{{userPermission}}</div>

            <div :style="[text,top175]">
                <input :style="textInput" v-model="nowPass" type="password" maxlength="8" :placeholder="placeholder01" value="">
            </div>
            <div :style="[text,top200]">
                <input :style="textInput" v-model="newPass" type="password" maxlength="8" :placeholder="placeholder02" value="">
            </div>
            <div :style="[text,top225]">
                <input :style="textInput" v-model="okPass" type="password" maxlength="8" :placeholder="placeholder03" value="">
            </div>
            <div :style="[text,top270]">
                <div :style="buttionbox">
                    <button v-on:click="editPass()" type="button" :style="[btn,button]">{{ti}}&nbsp;&nbsp;{{jiao}}</button>
                </div>
                <div id="messId" :style="messbox">
                    {{errorMessage}}
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
import swal from 'sweetalert'
export default {
  name: 'setup',
  mounted () {
    this.sessionId = this.$route.query.username
    this.getUser()
  },
  methods: {
    editPass: function () {
      let postData = {
        nowPass: this.nowPass.trim(),
        newPass: this.newPass.trim(),
        okPass: this.okPass.trim(),
        userLoginPwd: this.userLoginPwd,
        userId: this.userId,
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-setup/setup/editPassword', {
        params: {
          ...postData
        }
      }).then((response) => {
        if (response.data.message === 'success') {
          swal({
            title: '提示',
            text: '新密码设置成功，请重新登录',
            icon: 'success',
            button: '重新登录'
          }).then(() => {
            let postData1 = {
              sessionId: this.sessionId
            }
            this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-login/login/loginout', {
              params: {
                ...postData1
              }
            }).then((response) => {
              if (response.data === 'success') {
                this.$router.push({path: '/'})
              }
            })
          })
        } else {
          this.errorMessage = response.data.message
        }
      }).catch(error => {
        if (error.response.status === 401) {
          swal({title: '提示', text: '页面过期请重新登录', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        } else if (error.response.status === 402) {
          swal({title: '提示', text: '非法访问强制退出', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        }
      })
    },
    getUser: function () {
      let postData1 = {
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-setup/setup/getUser', {
        params: {
          ...postData1
        }
      }).then((response) => {
        if (response.data.message === 'success') {
          this.userLoginName = response.data.userPo.userLoginName
          this.userRealName = response.data.userPo.userRealName
          this.userPhoneNumber = response.data.userPo.userPhoneNumber
          this.userDept = response.data.userPo.userDept
          this.userSex = response.data.userPo.userSex
          if (this.userSex === 0) {
            this.userSex = '男'
          } else {
            this.userSex = '女'
          }
          this.userPermission = response.data.userPo.userPermission
          if (this.userPermission === 0) {
            this.userPermission = '系统管理员'
          } else if (this.userPermission === 1) {
            this.userPermission = '监测主管'
          } else {
            this.userPermission = '值班员'
          }
          this.userLoginPwd = response.data.userPo.userLoginPwd
          this.userId = response.data.userPo.userId
        } else {
          swal({
            title: '提示',
            text: response.data.message,
            icon: 'warning',
            button: '重新登录'
          }).then(() => {
            this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-login/login/loginout').then((response) => {
              if (response.data === 'success') {
                this.$router.push({path: '/'})
                this.$router.go(0)
              }
            })
          })
        }
      }).catch(error => {
        if (error.response.status === 401) {
          swal({title: '提示', text: '页面过期请重新登录', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        } else if (error.response.status === 402) {
          swal({title: '提示', text: '非法访问强制退出', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        }
      })
    }
  },
  data () {
    return {
      sessionId: '',
      ti: '提',
      jiao: '交',
      placeholder01: '请输入当前密码',
      placeholder02: '请输入新密码',
      placeholder03: '请输入确认密码',
      nowPass: '',
      newPass: '',
      okPass: '',
      userLoginPwd: '',
      userId: '',
      userLoginName: '',
      userRealName: '',
      userPhoneNumber: '',
      userDept: '',
      userSex: '',
      userPermission: '',
      errorMessage: '',
      button: {
        cursor: 'pointer !important',
        backgroundColor: '#3BA4EF',
        color: '#FFFFFF',
        borderRadius: '5px',
        border: 'none',
        outline: '0'
      },
      messbox: {
        position: 'absolute',
        width: '260px',
        height: '25px',
        marginLeft: '60px',
        color: '#FF0000'
      },
      btn: {
        width: '50px',
        height: '25px'
      },
      buttionbox: {
        position: 'absolute',
        width: '60px',
        height: '25px'
      },
      top25: {
        top: '25px'
      },
      top50: {
        top: '50px'
      },
      top75: {
        top: '75px'
      },
      top100: {
        top: '100px'
      },
      top125: {
        top: '125px'
      },
      top150: {
        top: '150px'
      },
      top175: {
        top: '175px'
      },
      top200: {
        top: '200px'
      },
      top225: {
        top: '225px'
      },
      top270: {
        top: '270px'
      },
      textInput: {
        border: '1px solid #006699',
        width: '315px',
        height: '20px',
        backgroundColor: '#174A7F',
        lineHeight: '20px',
        color: '#FFFFFF',
        textIndent: '10px',
        outline: 'none'
      },
      text: {
        position: 'absolute',
        width: '320px',
        height: '25px',
        lineHeight: '25px',
        textAlign: 'left',
        color: '#E7EC92',
        left: '75px',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'nowrap'
      },
      lable: {
        top: '25px',
        position: 'relative',
        width: '75px',
        height: '25px',
        lineHeight: '25px',
        textAlign: 'right',
        color: '#E7EC92',
        fontSize: '15px',
        fontWeight: 'normal'
      },
      contentbox: {
        position: 'absolute',
        width: '395px',
        height: '310px',
        marginTop: '30px',
        marginLeft: '28px'
      },
      titlebox: {
        position: 'absolute',
        width: '129px',
        height: '24px',
        marginLeft: '50px',
        textAlign: 'center',
        lineHeight: '24px',
        color: '#E7EC92'
      },
      setupmainbox: {
        position: 'relative',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/10.png') + ')',
        width: '450px',
        height: '350px',
        margin: '0px auto',
        top: '60px'
      }
    }
  }
}
</script>
<style scoped>
  span:hover {
    color: #85C5E8 !important;
  }
  span{
    cursor:pointer !important;
  }
  button:hover{
    background-color:#87CDF1 !important;
  }
  button:focus,input::-moz-focus-inner, button::-moz-focus-inner{
    outline: 0 !important;
  }
  button:active{
    background-color:#006699 !important;
  }
</style>
